<!-- 统治女神页面 -->
<template>
  <view class="page" :style="{ backgroundImage: `url(${counterStore.bg_img})` }">
    <!-- 返回按钮 -->
    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
      <view class="back-icon" @tap="goBack">
        <text class="iconfont">←</text>
      </view>
      <text class="page-title">统治女神</text>
    </view>

    <view class="content">
      <!-- 牌阵说明 -->
      <view class="spread-info">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFit" />
        <text class="description">统治女神牌阵是一个了解自己内心潜意识的牌阵，适用于当最近心神不宁，或不知自己在担心什么等情况，可帮助探索自我认知与内心状况。</text>
      </view>

      <!-- 问题示例 -->
      <view class="example-section">
        <text class="section-title">提问示例：</text>
        <text class="example-text">我内心深处渴望改变的潜在原动力，会推动我做出哪些突破？</text>
      </view>

      <!-- 牌阵说明 -->
      <view class="spread-layout">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFit" />
        <view class="layout-description">
          <text>统治女神牌阵通常由九张牌组成，包括：</text>
          <view class="card-meanings">
            <text class="card-position">第一张牌：代表思考能力。</text>
            <text class="card-position">第二张牌：代表直觉力、第六感。</text>
            <text class="card-position">第三张牌：代表感情倾向。</text>
            <text class="card-position">第四张牌：代表本能、潜在的原动力。</text>
            <text class="card-position">第五张牌：代表恐惧。</text>
            <text class="card-position">第六张牌：代表无法预期的事。</text>
            <text class="card-position">第七张牌：代表愿望。</text>
            <text class="card-position">第八张牌：代表可以预期的事。</text>
            <text class="card-position">第九张牌：代表结论。</text>
          </view>
        </view>
      </view>

      <!-- 开始按钮 -->
      <view class="bottom-tip">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFit" />
        <text>接下来，请集中注意力，心里默念你的问题，凭你的直觉抽取9张塔罗牌。</text>
      </view>

      <view class="button-group">
        <button class="action-button" @tap="navigateToAIReading">自助解牌</button>
        <button class="action-button primary" @tap="startDrawing">开始抽牌</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {useCounterStore} from '@/store/counter'

const counterStore = useCounterStore()

// 获取安全区域
const { safeAreaInsets } = uni.getSystemInfoSync()

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    fail: () => {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  })
}

// 跳转到卡牌选择页面
const startDrawing = () => {
  uni.navigateTo({
    url: '/pages/card-select/card-select?count=9&spread=goddess',
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}

// 跳转到AI解牌页面
const navigateToAIReading = () => {
  uni.navigateTo({
    url: '/pages/payment/payment',
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 12vw;
  background: rgba(26, 26, 46, 0.8);
  backdrop-filter: blur(10px);
}

.back-icon {
  position: absolute;
  left: 4vw;
  width: 8vw;
  height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
}

.page-title {
  flex: 1;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
}

.content {
  padding: 4vw;
}

.spread-info, .example-section, .spread-layout, .bottom-tip {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3vw;
  padding: 4vw;
  margin-bottom: 4vw;
}

.avatar {
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  margin-right: 3vw;
}

.description, .example-text {
  font-size: 3.2vw;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.section-title {
  display: block;
  font-size: 3.6vw;
  font-weight: bold;
  margin-bottom: 2vw;
  color: #ff3366;
}

.card-meanings {
  margin-top: 3vw;
}

.card-position {
  display: block;
  font-size: 3.2vw;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
}

.card-position:nth-child(1) { color: #ff3366; }
.card-position:nth-child(2) { color: #ff6b6b; }
.card-position:nth-child(3) { color: #ff9999; }
.card-position:nth-child(4) { color: #ffb366; }
.card-position:nth-child(5) { color: #ffcc66; }
.card-position:nth-child(6) { color: #ffe066; }
.card-position:nth-child(7) { color: #99ff99; }
.card-position:nth-child(8) { color: #66ccff; }
.card-position:nth-child(9) { color: #cc99ff; }

.button-group {
  display: flex;
  gap: 3vw;
  margin-top: 6vw;
}

.action-button {
  flex: 1;
  height: 11vw;
  line-height: 11vw;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2vw;
  font-size: 3.2vw;
  color: #fff;
}

.action-button.primary {
  background: linear-gradient(45deg, #ff3366, #ff6b6b);
}

.spread-info, .example-section, .spread-layout, .bottom-tip {
  display: flex;
  align-items: flex-start;
}

.layout-description {
  flex: 1;
  font-size: 3.2vw;
  line-height: 1.6;
}
</style> 